<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:gdmt="">


<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{file.manage.title}">fileAll</title>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-3;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-32-31-28; /* -32 顶部主菜单高度，   -90 查询条件高度*/
        }
        $(function () {
            resizePageSize();
            var _columnWidth = (_gridWidth-40)/5;
            $("#file-table-flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{/file/getFileList}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'fileUuid',name : 'fileUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{file.name}]]*/"",name : 'fileName',width : _columnWidth, sortable : true,align : 'center',process: function (v, _trid, _row) {
                            var vl = '<a href="#" style="color:blue;" class="btn-sm" onclick="preInfo(\''+ _row.fileUuid +'\',\''+ v+ '\')">' + v +'</a>';
                            return vl;
                        }},
                    {display : /*[[#{file.parent.uuid}]]*/"",name : 'parentUuid',width : _columnWidth, sortable : true,align : 'center',process: function (v, _trid, _row) {
                            return v;
                        }},
                    {display : /*[[#{file.type}]]*/"",name : 'fileType',width : _columnWidth, sortable : true,align : 'center',process: function (v, _trid, _row) {
                            var dom = $("#file-type-id option[value='" + v + "']");
                            return dom.text();
                        }},
                    {display : /*[[#{file.capacity}]]*/"",name : 'fileCapacity',width : _columnWidth, sortable : true,align : 'center',process: function (v, _trid, _row) {
                            var dom = $("#file-type-id option[value='" + v + "']");
                            return dom.text();
                        }},
                    {display : /*[[#{common.operation}]]*/"",name : 'fileUuid',width : _columnWidth, sortable : true,align : 'center',process: function (v, _trid, _row) {
                            var htmlContents = '<span style="color:blue;cursor:pointer;" onclick="share(\'' + v + '\');"><i class="glyphicon glyphicon-share"></i></span>';
                            htmlContents += '<a href="' + /*[[${#request.getContextPath()}]]*/'';
                            htmlContents += '/file/download/' + v +'" style="color:blue;" target="_blank"><i class="glyphicon glyphicon-save"></i></a>';
                            return htmlContents;
                        }}
                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true
            });
            $("#file-table-flexigrid-id").flexReload();

            $("#refresh-obs-file-id").click(function (event) {
                event.stopPropagation();
                $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{refreshObsFile}]]*/'',
                    data: [],
                    success: function (data) {
                        message(data.msg);
                        $("#file-table-flexigrid-id").flexReload();
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/);
                    }
                });
            });

            // 删除到回收站
            $("#del-btn-id").click(function (event) {
                var ids = $("#file-table-flexigrid-id").getFlexigridiAttrByIndex(0);
                if (ids.length !== 1){
                    message(/*[[#{common.select.one}]]*/);
                    return;
                }
                $.ajax({
                    type:'post',
                    async:false,
                    dataType :'json',
                    data:[{
                        name:"fileUuid",
                        value: ids
                    }],
                    url:/*[[@{/file/del}]]*/'',
                    success:function (data){
                        message(data.msg);
                    },
                    error:function (msg){
                        message();
                    }
                })
            });

            $("#query-btn-id").click(function (evnet) {
                evnet.stopPropagation();
                var searchFileName =  $("#search-file-name-id").val();
                $("#file-table-flexigrid-id").flexOptions({
                    extParam:[{name:"searchFileName",value:searchFileName}]
                }).flexReload();
            });
            $("#file-upload-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{file.upload}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var flag  = $("#file-upload-form-id input").verification();
                            if(!flag){
                                return;
                            }

                            $("#file-upload-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#upload-btn-id").click(function (event) {
                event.stopPropagation();
                $("#file-upload-form-id").resetForm();
                $("#file-upload-dialog-id").dialog('open');
            })

            $("#file-upload-form-id").ajaxForm({
                dataType: "json",
                success: function (data) {
                    message(data.msg);
                    $("#file-table-flexigrid-id").flexReload();
                    $("#file-upload-dialog-id").dialog("close")
                },
                error: function () {
                    message(/*[[#{common.error}]]*/'');

                },
                complete: function (response, status) {

                }
            });
            $("#pre-img-dialog-id").dialog({
                autoOpen : false,
                width : _gridWidth,
                height:_gridHeight,
                modal : true,
                resizable : false,
                title: /*[[#{file.pre}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }]
            });

        });//ready
        function preInfo (fileUUid,fileName) {
            //图片的判断
            var authImg=/((.jpg)|(.png)|(.ico))$/.exec(fileName);
            if(authImg){
                var src=/*[[${#request.getContextPath()}]]*/'';
                src+="/file/download/" +fileUUid;
                $("#pre-img-dom-id").attr("src",src);
                $("#pre-img-dialog-id").dialog('open');
            }
        }


    </script>
</head>
<body>

<nav>
    <span th:text="#{file.manage.title}"></span>
    <a sec:authorize="hasRole('ROLE_cldk_file_upload')" id="del-btn-id" href="#" class="btn-sm">
        <i class="glyphicon glyphicon-trash"></i>
    </a>
    <select id="file-type-id" gdmt:dicselect="file.type" style="display: none"></select>
</nav>
<table id="file-table-flexigrid-id"></table>

<div id="file-upload-dialog-id" style="display: none">
    <form th:action="@{upload}" id="file-upload-form-id" method="post" enctype="multipart/form-data">
        <input type="file" name="fileName" reg="^.{1,100}$">
    </form>
</div>
<div id="pre-img-dialog-id" style="display:none;">
    <img id="pre-img-dom-id"/>


    <!--    <audio controls>-->
    <!--       <source src="https://javatest10.obs.cn-north-4.myhuaweicloud.com:443/%E7%BE%8E%E5%BE%97%E4%B8%8D%E5%83%8F%E9%92%A2%E7%90%B4.mp3?AccessKeyId=HZBNCUNE63MH4CBLAAY6&Expires=1635297567&Signature=xUwG4x0ZSMh/2L7JuYvOMVms7NA%3D" type="audio/mpeg">-->
    <!--    </audio>-->

    <!--    <video width="320" height="240" controls="controls" src="https://javatest10.obs.cn-north-4.myhuaweicloud.com:443/QQ%E7%9F%AD%E8%A7%86%E9%A2%9120211024175333.mp4?AccessKeyId=HZBNCUNE63MH4CBLAAY6&Expires=1635297693&Signature=Hpw6lJouB4xs2G6oqZgqpTryN4I%3D">-->

    <!--    </video>-->

    <!--    <iframe id="preDocSrc" src="https://view.xdocin.com/xdoc?_xdoc=https://javatest10.obs.cn-north-4.myhuaweicloud.com:443/test/idea%E4%BD%BF%E7%94%A8%E6%80%BB%E7%BB%93.docx?AccessKeyId=HZBNCUNE63MH4CBLAAY6&Expires=1635297838&Signature=vuwix8GCZ9zrFthLn/WvHoTkHnk%3D" width="100%" height="100%" frameborder="1">-->
    <!--    </iframe>-->


</div>
</body>
</html>
